html {
    box-sizing: border-box;
    background: #ffc600;
    font-family: sans-serif; /* 原作者是用 "helvetica neue" */
    font-size: 20px;
    font-weight: 200;
}

body {
    margin: 0;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

.panels {
    min-height: 100vh;
    overflow: hidden;
    display: flex;
}

.panel {
    font-size: 20px;
    color: white;
    background-color: #6B0F9C;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);

    flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
    text-align: center;
    align-items: center;

    display: flex; /* 使其子元素即 <p> 元素由竖直堆叠改为水平排列  */
    flex-direction: column; /* 子元素即 <p> 元素重新变为竖直堆叠 */
    /* Safari transitionend event.propertyName === flex */
    /* Chrome + FF transitionend event.propertyName === flex-grow */

    transition:
    font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
    flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
    background 0.2s; /* .panel 所在元素字体大小、元素宽度及背景图片的变化过程 */
}

.panel1{
    background-image: url("./imgs/1.png");
}

.panel2{
    background-image: url("./imgs/2.png");
}

.panel3{
    background-image: url("./imgs/3.png");
}

.panel4{
    background-image: url("./imgs/4.png");
}

.panel5{
    background-image: url("./imgs/5.png");
}

.panel > * {
    margin: 0;
    width: 100%;
    transition: transform 0.5s; /* 作用于子元素即第一个和最后一个 <p> 的飞入、飞出，可在开发者工具下将时间调为 5s 即可清楚看到 */

    flex: 1 0 auto; /* 各子元素在竖直方向上均等分布，总高度和占父高 */

    display: flex; /* 使文字左对齐 */
    justify-content: center; /* 文字水平居中 */
    align-items: center; /* 文字垂直居中 */
}

.panel p {
  text-transform: uppercase; /* 使所有英文字母大写 */
  font-family: "Amatic SC", cursive; /* "Amatic SC" 字体已经在 index.html 页面通过 <link> 标签引入 */
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); /* 两层阴影叠加 */
  font-size: 2em;
}

.panel p:nth-child(2) { /* .panel 下的第 2 个 <p> 元素 */
  font-size: 4em;
}

/* 配合 JS 脚本产生交互效果 */

.panel > *:first-child { /* 第一个子元素 */
    transform: translateY(-100%); /* 默认不出现在 viewport 中 */
}

.panel.open-active > *:first-child {
    transform: translateY(0); /* 当被点击时，则平移会原来的位置，从而出现在 viewport 中 */
}

.panel > *:last-child { /* 最后一个子元素 */
    transform: translateY(100%);
}

.panel.open-active > *:last-child {
    transform: translateY(0);
}

.panel.open { /* 被点击时，对应元素的宽度放大的同时，文字也变大 */
  flex: 5;
  font-size:40px;
}

/*.cta {
  color:white;
  text-decoration: none;
}*/
